<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 必须的 meta 标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title>闪耀其中首页</title>
    <link rel="icon" href="../img/000.jpg" type="image/x-icon" />
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<style>
    body{

        background: url("../img/1.png");
    }
    div[class*="col-"] {
    }

    .title {
        height: 70px;
        text-align: left;
        line-height: 70px;
        color: #933d3d;
        font-size: 50px;
        font-family:"楷体";
    }
   li{
        padding:1px;margin:0;
        list-style:none;
        color: #ffc107;
    }
    .middle {
        height: 600px;
        background-color: rgba(86, 61, 124, .15);
        border: 1px solid #ddd;
        border: 1px solid rgba(86, 61, 124, .2);
        padding: 0px;
    }

    .tail {
        height: 30px;
    }
    a{
        list-style:none
    }
    .menu {
        height: 500px;
        padding: 0px;
        overflow: auto;
    }
</style>
<body>
<div class="container-fluid">
    <div class="row">

        <div class="col-xl-12 title">
            <img src="../img/000.jpg" style="width: 50px;height: 50px;line-height: 50px">闪耀其中首页
        </div>
    </div>
    <div class="row">
        <div id="app" class="col-xl-2 menu">
            <div id="accordion">
                <div class="card" v-for="menu in employee.menuList">
                    <div class="card-header" >
                        <a class="card-link" data-toggle="collapse" :href="'#menu'+menu.menuId">
                            {{menu.menuName}}
                        </a>
                    </div>
                    <div :id="'menu' + menu.menuId" class="collapse hide" data-parent="#accordion">
                        <div class="card-body" >
                            <ul v-for="subMenu in menu.subMenu">
                                    <li >
                                        <a href="javascript:void(0);" v-on:click="openMenu(subMenu.menuUrl)">
                                            {{subMenu.menuName}}
                                        </a>
                                    </li>

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-10 middle">
            <!--            使用iFrame引入其他页面-->
            <iframe id="iframe" src="../index_logo.html"  width="100%" height="100%"></iframe>
        </div>
    </div>
    <div class="row">
        <div class="col-xl-12 tail">

        </div>
    </div>
</div>
<script src="../bootstrap/jquery3.6.js"></script>
<script src="../bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../bootstrap/vue.js"></script>
<script>
    // 加载菜单列表
    $.ajax({
        type: "post",
        url: "../Menu/getMenu",
        dataType: "json",
        success: function (json) {
            let app = new Vue({
                el: '#app',
                data:json,
                methods:{
                    openMenu:function (url) {
                        $("#iframe").attr("src",url);
                    }
                }
            })
        }
    });

    // iframe内容展示
    function openMenu(url) {
        // 使用jquery设置iframe标签的src路径
        // jquery方法 show hide val each bind
        $("#iframe").attr("src", url);
    }
</script>
</body>
</html>